import React from 'react'
import cls from 'classnames'
import { View } from '@tarojs/components'


export interface ILoadingProps {
    color?: string
    vertical?: boolean
    type?: string 
    size?: number
    textSize?: string

}

import './index.scss'

export const Loading:React.FC<ILoadingProps> = (props)=>{
    const len = Array.from({ length: 12 })
    return (
        <View className={cls('xxm-loading-ls', {
            'xxm-loading-ls--vertical': props.vertical
        })}>
          <View className={cls('xxm-loading-ls__spinner', 
          `xxm-loading-ls__spinner--${props.type || 'circular'}`)}
           style={{
               color: props.color,
               width: `${props.size}px`,
               height: `${props.size}px`
           }}
          >
              { 
              props.type === 'spinner' &&  len.map((_, idx)=>{
                  return (
                      <View className="xxm-loading-ls__dot" key={idx}></View>
                  )
              })
              }
          </View>
          <View className="xxm--loading-ls__text" style={{ fontSize: `${props.textSize}px` }}> 
              {props.children}
          </View>
        </View>
    )

}